<!DOCTYPE html>
<html lang="">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <link rel="icon" href="<%= BASE_URL %>favicon.ico">
  <title><%= htmlWebpackPlugin.options.title %></title>
  <style>
    @keyframes jump {
      0% {
        transform: translateY(0) rotate(45deg);
        animation-timing-function: cubic-bezier(.3, .76, .53, .99);
      }
      50% {
        transform: translateY(-1.5em) rotate(225deg);
        animation-timing-function: cubic-bezier(.45, -0.01, .6, .15);
      }
      100% {
        transform: translateY(0) rotate(405deg);
        animation-timing-function: cubic-bezier(.3, .76, .53, .99);
      }
    }

    [data-plain-logo-loading=true] {
      animation: jump 1s infinite;
    }
  </style>
</head>
<body>
<noscript>
  <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app">
  <div style="width: 100%;height: calc(100vh - 20px);display: flex;align-items: center;justify-content: center;font-size: 56px">
    <div data-plain-logo-loading="true" style="height: 1em; width: 1em; display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center;">
      <div style="width: calc(0.5em); height: 0.5em; background: linear-gradient(135deg, rgb(235, 47, 150), transparent); transform: skewX(20deg) rotate(10deg); border-radius: 0.1em; transform-origin: right bottom;"></div>
      <div style="width: calc(0.5em); height: 0.5em; background: linear-gradient(225deg, rgb(114, 46, 209), transparent); transform: skewX(-20deg) rotate(-10deg); border-radius: 0.1em; transform-origin: left bottom;"></div>
      <div style="width: calc(0.5em); height: 0.5em; background: linear-gradient(45deg, rgb(22, 119, 255), transparent); transform: skewX(-20deg) rotate(-10deg) scale(1); border-radius: 0.1em; transform-origin: right top; margin-top: 0.03em;"></div>
      <div style="width: calc(0.5em); height: 0.5em; background: linear-gradient(315deg, rgb(82, 196, 26), transparent); transform: skewX(20deg) rotate(10deg) scale(1); border-radius: 0.1em; transform-origin: left top; margin-top: 0.03em;"></div>
    </div>
  </div>
</div>
<!-- built files will be auto injected -->
<script>
  setTimeout(() => {
    const logo = document.querySelector('[data-plain-logo-loading]');
    if (!!logo) {logo.style.opacity = '1';}
  }, 200);
</script>
</body>
</html>
